import React, { Component } from 'react';
import {
    Text, Image, View, ToastAndroid, PixelRatio, ScrollView, TouchableOpacity,AppRegistry,Picker,TextInput,SwitchAndroid
} from 'react-native';
import TestFunctionUtils from '../util/TestFunctionUtils';

import Head from './layout/Head';
import styles from '../../assets/css/style.js';
import GlobalConfig from '../util/Global';
const rem = GlobalConfig.WIDTH/7.5;
const her = (GlobalConfig.HEIGHT-6.84*rem);
const onePT = GlobalConfig.ONEPT;

/**
 * 设置
 */
export default class SettingView extends Component {
     constructor(props){
        super(props);
        this.state = {
            language:"密钥",
            channel:"2.4GHZ",
            power:"畅通",
            text:null,
            sus:styles.SUSwitch,
            mus:styles.SUButMove
        };
    }
    tog(){
        this.setState({
            sus:styles.SUSwitchBg,
            mus:styles.SUButMoveBg
        })
    }
    render(){
        //const {navigate} = this.props.navigation; navigate={navigate}
        const lists=[["首 页","icon_in", GlobalConfig.LOGIN_VIEW],
                     ["测试功能","icon_cs", GlobalConfig.TESTING_VIEW],
                     ["状态查看","icon_ck", GlobalConfig.STATUS_CHECK_VIEW]];
        return (
            <View style={[styles.flex,styles.bgcolor]}>
                <Head title="WIFI设置" list={lists}> </Head>
                <View style={styles.flex}>
                    <ScrollView style={styles.ztScroll}>
                       <View style={styles.SUWrap}>
                           <View style={styles.SUList}>
                                <View style={styles.SUTop}>
                                    <Image
                                        style={styles.SUIcon}
                                        resizeMode="contain"
                                        source={require('../../assets/img/icon_list05.png')}
                                    />
                                    <Text style={styles.SUFont_01}>2.4GHZ</Text>
                                    <TouchableOpacity style={styles.SUBut} onPress={this.tog}>
                                        <View style={this.state.sus}>
                                            <View style={this.state.mus}></View>
                                        </View>
                                    </TouchableOpacity>


                                </View>
                               <View style={styles.SUItem}>
                                   <View style={styles.ItemWrap}>
                                       <Text style={styles.ItemFont}>SSID名称</Text>
                                       <Text style={styles.ItemFont}>HUAWEI_P9</Text>
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>加密方式</Text>
                                       <Picker
                                           selectedValue={this.state.language}
                                           onValueChange={lang => this.setState({language: lang})}
                                           mode="dialog"
                                           style={styles.SUPick}>
                                           <Picker.Item label="密钥" value="密钥" />
                                           <Picker.Item label="其他" value="其他" />
                                       </Picker>
                                       <Text style={styles.ItemFont}>{this.state.language}</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_se.png')}
                                       />
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>WIFI密码</Text>
                                       <Text style={styles.ItemFont}>……</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_ey.png')}
                                       />
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>信道设置</Text>
                                       <Picker
                                           selectedValue={this.state.channel}
                                           onValueChange={lang => this.setState({channel: lang})}
                                           mode="dialog"
                                           style={styles.SUPick}>
                                           <Picker.Item label="2.4GHZ" value="2.4GHZ" />
                                           <Picker.Item label="5.0GHZ" value="5.0GHZ" />
                                       </Picker>
                                       <Text style={styles.ItemFont}>{this.state.channel}</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_se.png')}
                                       />
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>发射功率</Text>
                                       <Picker
                                           selectedValue={this.state.power}
                                           onValueChange={lang => this.setState({power: lang})}
                                           mode="dialog"
                                           style={styles.SUPick}>
                                           <Picker.Item label="畅通" value="畅通" />
                                           <Picker.Item label="一般" value="一般" />
                                       </Picker>
                                       <Text style={styles.ItemFont}>{this.state.power}</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_se.png')}
                                       />
                                   </View>
                               </View>
                           </View>
                           <View style={styles.SUList}>
                               <View style={styles.SUTop}>
                                   <Image
                                       style={styles.SUIcon}
                                       resizeMode="contain"
                                       source={require('../../assets/img/icon_list05.png')}
                                   />
                                   <Text style={styles.SUFont_01}>5.0GHZ</Text>
                                   <View style={[styles.SUBut,styles.SUSwitch]}>
                                       <View style={styles.SUButMove}></View>
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={styles.ItemWrap}>
                                       <Text style={styles.ItemFont}>SSID名称</Text>
                                       <Text style={styles.ItemFont}>HUAWEI_P9</Text>
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>加密方式</Text>
                                       <Picker
                                           selectedValue={this.state.language}
                                           onValueChange={lang => this.setState({language: lang})}
                                           mode="dialog"
                                           style={styles.SUPick}>
                                           <Picker.Item label="密钥" value="密钥" />
                                           <Picker.Item label="其他" value="其他" />
                                       </Picker>
                                       <Text style={styles.ItemFont}>{this.state.language}</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_se.png')}
                                       />
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>WIFI密码</Text>
                                       <Text style={styles.ItemFont}>……</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_ey.png')}
                                       />
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>信道设置</Text>
                                       <Picker
                                           selectedValue={this.state.channel}
                                           onValueChange={lang => this.setState({channel: lang})}
                                           mode="dialog"
                                           style={styles.SUPick}>
                                           <Picker.Item label="2.4GHZ" value="2.4GHZ" />
                                           <Picker.Item label="5.0GHZ" value="5.0GHZ" />
                                       </Picker>
                                       <Text style={styles.ItemFont}>{this.state.channel}</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_se.png')}
                                       />
                                   </View>
                               </View>
                               <View style={styles.SUItem}>
                                   <View style={[styles.ItemWrap,styles.SUPass]}>
                                       <Text style={styles.ItemFont}>发射功率</Text>
                                       <Picker
                                           selectedValue={this.state.power}
                                           onValueChange={lang => this.setState({power: lang})}
                                           mode="dialog"
                                           style={styles.SUPick}>
                                           <Picker.Item label="畅通" value="畅通" />
                                           <Picker.Item label="一般" value="一般" />
                                       </Picker>
                                       <Text style={styles.ItemFont}>{this.state.power}</Text>
                                       <Image
                                           style={styles.Icon_SU}
                                           resizeMode="contain"
                                           source={require('../../assets/img/icon_se.png')}
                                       />
                                   </View>
                               </View>
                           </View>
                       </View>

                    </ScrollView>
                </View>
            </View>
        );
    }
}